<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法5：v-if和v-show条件渲染</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1 v-if</h1>
            <h3>v-if v-else-if v-else 它们中间是不能有任何其他的标签对</h3>
            <p>例子</p>
            <h3 v-if="order==0">我是第一排</h3>
            <h3 v-else-if="order==1">我我我是第二排</h3>
            <h3 v-else="order==2">我才不要当第三排呢</h3>
            <br>
            <button @click="order=++order%3">切换</button>
        <h1>知识点2 v-show</h1>
            <p>例子</p>
            <h3 v-show="visible">我是v-show的展示</h3>
            <h3 v-if="visible">我是v-if的展示</h3><br>
            <button @click="visible=!visible">显示/隐藏</button>
            <h4>v-show是通过添加样式来实现隐藏，v-if是通过删除标签来实现隐藏的，
                通过情况，只是单纯的显示隐藏，选用v-show
            </h4>
            <h3>通过按钮的单击事件实现不同用户身份显示不同的前端页面</h3>
            <input type="radio" value="管理员" v-model="users">管理员
            <input type="radio" value="教师" v-model="users">教师
            <input type="radio" value="学生" v-model="users">学生
            <br>
            <div v-if="users=='管理员'">
                {{users}}欢迎你！
                <button>管理</button>
            </div>
            <div v-if="users=='教师'">
                {{users}}欢迎你！
                <button>下班</button>
            </div>
            <div v-if="users=='学生'">
                {{users}}欢迎你！
                <button>房价</button>
            </div>
        <h1>自主练习：选择登录方式，微信、QQ、手机，邮箱</h1>
        <label>请选择登录类型</label>
            <input type="radio" value="QQ" v-model="login">QQ
            <input type="radio" value="手机号" v-model="login">手机号
            <input type="radio" value="微信" v-model="login">微信
            <input type="radio" value="邮箱" v-model="login">邮箱
            <br>
            <div v-if="login=='QQ'">
                <h2>{{login}}登录</h2>
                QQ：<input type="text"><br>
                密码 :<input type="text"><br>
                <button>登录</button>
            </div>
            <div v-if="login=='手机号'">
                <h2>{{login}}登录</h2>
                手机号：<input type="text"><br>
                验证码：<input type="text"><br>
                <button>登录</button>
            </div>
            <div v-if="login=='微信'">
                <h2>{{login}}登录</h2>
                微信号：<input type="text"><br>
                密码码：<input type="text"><br>
                <button>登录</button>
            </div>
            <div v-if="login=='邮箱'">
                <h2>{{login}}登录</h2>
                邮箱地址：<input type="text"><br>
                邮箱密码：<input type="text"><br>
                <button>登录</button>
            </div>
        
    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                order:0,
                visible:true,
                users:'管理员',
                login:'',
            }
        },

    }).mount("#app")
</script>